<template>
  <div>
    <input id="upload-input" ref="uploadInput" type="file" :accept="accept" :multiple="multiple" @change="fileChange($event)">
    <div class="upload-file-wrap">
      <div v-for="(item, index) in imgList" :key="index" class="preview-box" :style="{'width': width, 'height': height, 'margin-right': gap, 'margin-bottom': gap}">
        <img :src="item.file.src" alt="">
        <div class="delete-file" @click="fileDel(index)">
          <i class="el-icon-close" />
        </div>
        <div class="file-name">
          <el-tooltip class="item" effect="dark" :content="item.file.name" placement="bottom">
            <span>{{ item.file.name }}</span>
          </el-tooltip>
        </div>
      </div>
      <label v-if="fileListArr.length < limit" for="upload-input" class="upload-box" :style="{'width': width, 'height': height, 'margin-right': gap, 'margin-bottom': gap}" @click="upload">
        <i class="el-icon-plus" />
      </label>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Test',
  components: {},
  props: {
    accept: {
      type: String,
      default: 'application/pdf, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      // default: 'application/*'
    },
    height: {
      type: String,
      default: '160px'
    },
    width: {
      type: String,
      default: '160px'
    },
    gap: {
      type: String,
      default: '8px'
    },
    multiple: {
      type: [String, Boolean],
      default: false
    },
    limit: {
      type: Number,
      default: 9
    }
  },
  data() {
    return {
      imgList: [], // 页面显示图片的列表
      fileListArr: [] // 文件真正存储的列表
    }
  },
  created() {},
  mounted() {},
  methods: {
    upload() {},
    fileChange(e) {
      for (let i = 0; i < e.target.files.length; i++) {
        this.fileListArr.push(e.target.files[i])
      }
      this.fileList(e.target)
      e.target.value = ''
    },
    fileList(fileList) {
      const files = fileList.files
      for (let i = 0; i < files.length; i++) {
        if (files[i].type !== '') {
          this.fileAdd(files[i])
        } else {
          this.folders(fileList.items[i])
        }
      }
    },
    folders(files) {
      const _this = this
      if (files.kind) {
        files = files.webkitGetAsEntry()
      }
      files.createReader().readEntries(function(file) {
        for (let i = 0; i < file.length; i++) {
          if (file[i].isFile) {
            _this.foldersAdd(file[i])
          } else {
            _this.folders(file[i])
          }
        }
      })
    },
    foldersAdd(entry) {
      const _this = this
      entry.file(function(file) {
        _this.fileAdd(file)
      })
    },
    fileAdd(file) {
      if (file.type.indexOf('image') === -1) {
        file.src = require('../assets/image/file_instead.png')
        this.imgList.push({
          file
        })
      } else {
        const reader = new FileReader()
        const image = new Image()
        const _this = this
        reader.readAsDataURL(file)
        reader.onload = function() {
          file.src = this.result
          image.onload = function() {
            const width = image.width
            const height = image.height
            file.width = width
            file.height = height
            _this.imgList.push({
              file
            })
          }
          image.src = file.src
        }
      }
    },
    fileDel(index) {
      this.imgList.splice(index, 1)
      this.fileListArr.splice(index, 1)
    },
    submit(fn, params = {}) {
      const formData = new FormData()
      this.fileListArr.forEach(item => {
        formData.append('file', item)
      })
      params.file = formData
      fn(params).then(res => {
        if (res.data.size || res.data.code === 200) {
          this.$emit('success', res)
        } else {
          this.$emit('fail', res)
        }
      }).catch(err => {
        this.$emit('fail', err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
#upload-input{
  display: none;
}
.upload-file-wrap{
  display: flex;
  flex-wrap: wrap;
}
.upload-box{
  border: 2px dashed #e3e3e3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
  cursor: pointer;
  i{
    font-size: 36px;
    color: #e3e3e3;
    transition: all .3s;
  }
}
.preview-box{
  border: 2px dashed #e3e3e3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
  }
  .file-name{
    padding: 0 8px;
    position: absolute;
    bottom: 0;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    font-size: 12px;
    span{
      cursor: default;
    }
  }
  .delete-file{
    position: absolute;
    right: 2%;
    top: 2%;
    color: red;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    i{
      cursor: pointer;
    }
  }
}
.preview-box:hover{
  border-color: #6596ff;
}
.upload-box:hover{
  border-color: #6596ff;
  i{
    color: #6596ff;
  }
}
</style>
